<template>
  <div class="top">
    <div class="menus_left">
      <img src="@/assets/logo.png" class="logo" />
      <div class="menus">
        <text class="menu">活动</text>
        <text class="menu" @mouseenter="isShowMenuDialog(true)">智算服务</text>
        <text class="menu">产品</text>
        <text class="menu">解决方案</text>
        <text class="menu">应用商城</text>
        <text class="menu">合作伙伴</text>
        <text class="menu">开发者</text>
        <text class="menu">支持与服务</text>
        <text class="menu">了解鼎助云</text>
      </div>
    </div>

    <div class="menus_right">
      <text class="menu">文档</text>
      <text class="menu">控制中心</text>
      <text class="menu">备案</text>
      <text class="menu">管理中心</text>
      <div class="line"></div>
      <text class="menu">登录</text>

      <el-button class="reg">免费注册</el-button>
    </div>
    <SmartComputeService ref="smartComputeServiceRef"></SmartComputeService>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, onBeforeUnmount, onUnmounted } from 'vue';
import SmartComputeService from '@/components/SmartComputeService.vue';

const smartComputeServiceRef = ref();

function isShowMenuDialog(isShow) {
  if (isShow) {
    smartComputeServiceRef.value.showModal();
  } else {
    smartComputeServiceRef.value.hideModal();
  }
}

onMounted(() => {});
</script>

<style scoped lang="scss">
.logo {
  width: 107px;
  height: 31px;
}

.top {
  display: flex;
  justify-content: space-between;

  width: 100vw;
  height: 70px;
  background-color: white;
  box-shadow: 0 1px 2px rgba($color: #686868, $alpha: 0.2);
  padding: 0 30px;

  .menus {
    display: flex;
    gap: 15px;
  }
}

.menu {
  font-size: 14px;
  flex-wrap: nowrap;
  white-space: nowrap;
  cursor: pointer;
}

.menus_left {
  display: flex;
  gap: 15px;
  align-items: center;
}

.menus_right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.line {
  width: 1px;
  height: 20%;
  background-color: #dadada;
}

.reg {
  background-color: var(--next-bg-main);
  height: 40px;
  border-radius: 7px;

  color: white;
  font-weight: bold;
}
</style>
